<template>
  <el-dialog
    :modal="false"
    :modal-append-to-bod="false"
    :visible.sync="dialogVisible"
    width="80%">
    <!-- 新增 -->
    <el-table
      :data="dataList"
      :header-cell-style="{background:'#F5F7FA',color:'#606266'}"
      row-key="id"
      @selection-change="selectionChangeHandle"
      @select="select"
      show-summary
      :summary-method="getSummaries"
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        type="selection"
        :selectable="handleSelection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="floor"
        header-align="center"
        align="center"
        label="楼/楼层">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="房类">
      </el-table-column>
      <el-table-column
        prop="price"
        header-align="center"
        align="center"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="disPrice"
        header-align="center"
        align="center"
        label="节日价格">
      </el-table-column>
      <el-table-column
        prop="def0"
        header-align="center"
        align="center"
        label="间数">
        <template slot-scope="scope">
          <el-input-number controls-position="right"
                           v-if="scope.row.isVis === 0"
                           :min="1"
                           placeholder="间数"
                           v-model="scope.row.def0"
                           @blur="scope.row.def1 = scope.row.def0 * scope.row.price"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="def1"
        header-align="center"
        align="center"
        label="总价">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="创建时间">
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="successHandle()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {treeDataTranslate} from '@/utils'

  export default {
    data () {
      return {
        dataListSelections: [],
        dialogVisible: false,
        currentRow: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        isAdd: false,
        totalPrice: 0
      }
    },
    methods: {
      init (id) {
        this.isAdd = id === '0' || id === 0
        this.dialogVisible = true
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataList = []
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/tra/roomtype/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = treeDataTranslate(data.list)
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 选中控制
      select (selection, row) {
        if (row.isVis === 0) {
          row.def0 = ''
          row.def1 = ''
          row.isVis = 1
        } else {
          row.isVis = 0
        }
      },
      // 点击确认之后的处理
      successHandle () {
        if (!this.isAdd && (this.dataListSelections.length > 1 || this.dataListSelections[0].def0 > 1)) {
          this.$message({
            message: '修改时只能选择一个房间',
            type: 'warning'
          })
        } else {
          this.dataListHandle()
          this.dialogVisible = false
          this.$emit('roomTypeCallback', this.dataListSelections)
        }
      },
      // 处理datalist的数据，给二级加上floor
      dataListHandle () {
        for (let level1 of this.dataList) {
          for (let val of this.dataListSelections) {
            if (level1.id === val.parentId) {
              val.floor = level1.floor
            }
          }
        }
      },
      // 设置多选框不可选
      handleSelection (row, index) {
        return row.type !== 0
      },
      getSummaries (param) {
        const {columns, data} = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合 计'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (index === 6) {
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0)
              sums[index] += ' 元'
            }
          }
        })
        return sums
      },
      // 单选
      currentChange (currentRow, oldCurrentRow) {
        this.dialogVisible = false
        this.currentRow.push(currentRow)
        this.$emit('roomTypeCallback', this.currentRow)
      }
    }
  }
</script>

<style>
  .el-table__header .el-checkbox {
    display: none
  }
</style>
